<template>
  <div class='list-model ft14'>
    <div v-for="(item, index) in modelData" :key="index" class="mb10 mt10">
      <span class="title ft14">{{item.label}}：</span>
      <span v-if="item.isArray">{{item.isArray[formaltData[item.prop]]}}</span>
      <span v-else-if="readonly&&(item.isInput||item.isSelect||item.isTextarea||item.isRadio)">{{formaltData&&formaltData[item.prop]}}</span>
      <div v-else-if="readonly&&item.isUpload" class="imgs-box">
        <img v-for="(img, imgIndex) in formaltData[item.prop]" :key="imgIndex" :src="img" alt="">
      </div>
      <el-input v-else-if="item.isInput" v-model="formaltData[item.prop]" clearable placeholder=""></el-input>

      <el-select v-else-if="item.isSelect" v-model="formaltData[item.prop]"   allow-create clearable placeholder="请选择" @change="chooseType(item.label)">
        <el-option
          v-for="(opt,optIndex) in item.array"
          :key="optIndex"
          :label="opt.label"
          :value="item.prop=='categoryId'?opt.value:opt.label+','+opt.value">
        </el-option>
      </el-select>

      <el-radio-group v-else-if="item.isRadio" v-model="item.value" @change="doChange(item)">
        <el-radio v-for="(opt, optIndex) in item.array" :key="optIndex" :label="opt.value">{{opt.label}}</el-radio>
      </el-radio-group>
      <UploadImgs v-else-if="!readonly&&item.isUpload" :defaultImgs="formaltData[item.prop]" @success="imgList" :path="item.path" />
      <el-input
        v-else-if="item.isTextarea"
        v-model="formaltData[item.prop]"
        type="textarea"
        :rows="4"
        placeholder="请输入内容"
      >
      </el-input>
    </div>
  </div>
</template>
<script>
import UploadImgs from '@/components/upload/uploadImgs.vue'
export default {
  props:['modelData',"readonly","data"],
  components: {UploadImgs},
  name: "",
  data() {
    return {
        //myType:"",
        spec : [],
    };
  },
  computed:{
    formaltData(){
      if(this.data.subImages&&!Array.isArray(this.data.subImages))this.data.subImages=this.data.subImages.split(";")
      return this.data
    }
  },
  methods: {

     chooseType(ids) {
         let id = this.data.categoryId;
         //若父级包含分类查询，则执行级联查询
         if(id){
             _g.apiPost("goodsManage/insertPage.do", {id: id}).then(res => {
                 this.$emit("chooseT",{msg:"success",data:res})
             })
         }else if(id && id==0){
             _g.toMessage({status:1,msg:"请选择分类"});
         }else{

         }
      },
      imgList(res){
          this.formaltData.subImages=res
      }
  },
  created() {
  },
};
</script>
<style lang="scss" scoped>
.list-model {
  >div{
    display: flex;
    .el-input{
      width: 200px;
    }
    .el-textarea{
      width: 600px;
    }
    span{
      line-height: 30px;
      // font-size: 14px;
    }
    .title{
      display: inline-block;
      min-width: 100px;
      text-align: right;
    }
  }
  .imgs-box{
    display: flex;
    flex-wrap: wrap;

    img{
      width: 140px;
      height: 140px;
    }
  }
}
</style>